<template>
	<view class='pageBottom' v-if="show">
		<view class='helper'>
			<view class="title">{{$t('pageBottom.support_help')}}</view>
			<!-- <view class="helpLine">
				<view class='tips'>{{$t('pageBottom.custom')}}</view>
				<view class='address'>help.noon.com</view>
			</view> -->
			<view class="helpLine" style="border: none;">
				<view class='tips'>{{$t('pageBottom.email')}}</view>
				<view class='address'>{{detail.email}}</view>
			</view>
		</view>
		<view class='platform'>
			<view class='title'>{{$t('pageBottom.shop')}}</view>
			<!-- <view class="company dFlex jCenter_aCenter">
				<view class='compIcon imgPublic'>
					<image src="../static/images/google-play.png" mode="widthFix"></image>
				</view>
				<view class='compIcon imgPublic'>
					<image src="../static/images/Huawei-icon.png" mode="widthFix"></image>
				</view>
			</view> -->
			<view class='desc'>{{detail.copy}}</view>
			<!-- <view class='payWay dFlex jAround_aCenter'>
				<view class='wayOne imgPublic'>
					<image src="../static/images/card-mastercard.png" mode="widthFix"></image>
				</view>
				<view class='wayOne imgPublic'>
					<image src="../static/images/card-visa.png" mode="widthFix"></image>
				</view>
				<view class='wayOne imgPublic'>
					<image src="../static/images/tabby_v2.png" mode="widthFix"></image>
				</view>
				<view class='wayOne imgPublic'>
					<image src="../static/images/tamara-en.png" mode="widthFix"></image>
				</view>
				<view class='wayOne imgPublic'>
					<image src="../static/images/card-amex.png" mode="widthFix"></image>
				</view>
				<view class='wayOne imgPublic'>
					<image src="../static/images/cod-en.png" mode="widthFix"></image>
				</view>
			</view> -->
			<!-- <view class='link dFlex jAround_aCenter fWap'>
				<view class='linkOne'>{{$t('pageBottom.Careers')}}</view>
				<view class='linkOne'>{{$t('pageBottom.Warranty_Policy')}}</view>
				<view class='linkOne'>{{$t('pageBottom.Sell_with_us')}}</view>
				<view class='linkOne'>{{$t('pageBottom.Terms_of_Use')}}</view>
				<view class='linkOne'>{{$t('pageBottom.Privacy_Policy')}}</view>
				<view class='linkOne'>{{$t('pageBottom.Consumer_Rights')}}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		name: "pageBottom",
		mounted() {
			this.init()
		},
		data() {
			return {
				detail: {}
			};
		},
		methods: {
			init() {
				this.$api('/User/about').then(res => {
					this.detail = res
				})
			}
		}
	}
</script>

<style lang="scss">
	.pageBottom {
		.platform {
			.link {
				.linkOne {
					width: 30%;
					text-align: center;
					white-space: nowrap;
					font-size: 12px;
					margin-bottom: 6px;
				}
			}

			.payWay {
				margin: 8px 0 15px;

				.wayOne {
					width: calc((100% - 12px * 5) / 6);
				}
			}

			.connect {
				font-size: 12px;
				font-weight: bold;
			}

			.company {
				margin: 15px 0 12px;

				.compIcon {
					width: 116px;
					margin: 0 5px;
				}
			}

			.title {
				width: 100%;
				font-weight: bold;
			}

			width:100%;
			padding:20px 12px;
			box-sizing: border-box;
			text-align: center;
			background:white;
		}

		.helper {
			.helpLine {
				.address {
					font-weight: bold;
					margin-top: 5px;
				}

				.tips {
					font-size: 12px;
					color: rgb(126, 133, 155);
				}

				width:70%;
				padding:10px 0;
				border-bottom:1px solid rgba(0, 0, 0, 0.1);
				margin: 0 auto;
				text-align:center;
			}

			.title {
				font-size: 1.25rem;
				font-weight: 700;
				color: rgb(64, 69, 83);
				margin-bottom: 12px;
			}

			width:100%;
			padding:15px 0;
			margin-bottom: 20px;
			text-align: center;
			background:white;
		}

		width:100%;
		// padding-bottom: 50px;
		background: #f8f8f8;
	}
</style>